<template>
  <div class="vc-search self">
    <div class="vc-search-left" id="self-search">
      <div
        :class="{ display: display(idx, rowCount) }"
        :key="idx"
        :style="'width:' + box.width"
        class="search-input-box"
        v-for="(item, idx) in insideConfig.items"
      >
        <span :class="{ firstBox: isFirstBox(idx, item) }" class="search-title">{{ item.title }}</span>
        <div class="input-box">
          <el-input
            :placeholder="item.placeholder ? item.placeholder : '请输入'"
            class="vc-search-input"
            clearable
            size="small"
            v-if="!item.type || item.type === 'input'"
            v-model="insideConfig.params[item.key]"
          ></el-input>
          <el-select
            :placeholder="item.placeholder ? item.placeholder : '请选择'"
            :style="'width:' + item.width"
            class="vc-search-input"
            clearable
            readonly
            size="small"
            suffix-icon="el-icon-arrow-down"
            v-else-if="item.type === 'select'"
            v-model="insideConfig.params[item.key]"
          >
            <el-option
              :key="group.code"
              :label="group.name"
              :value="group.code"
              v-for="group in item.groups"
            ></el-option>
          </el-select>
          <el-date-picker
            v-model="insideConfig.params[item.key]"
            :type="item.type"
            :format="item.format"
            :placeholder="item.placeholder"
            :start-placeholder="item.startPlaceholder"
            :end-placeholder="item.endPlaceholder"
            :editable="false"
            value-format="timestamp"
            class="vc-search-input"
            size="small"
            clearable
            v-else
          ></el-date-picker>
        </div>
      </div>
      <div :style="'float:right;width:' + box.width" class="search-buton-box">
        <div class="button-box">
          <div class="expand-box" v-if="insideConfig.items.length > (rowCount ? rowCount : 2)">
            <el-button @click="isExpand = true" size="small" type="text" v-show="!isExpand">
              展开
              <i class="el-icon-arrow-down"></i>
            </el-button>
            <el-button @click="isExpand = false" size="small" type="text" v-show="isExpand">
              收起
              <i class="el-icon-arrow-up"></i>
            </el-button>
          </div>
          <el-button
            @click="searchConfig.search(searchConfig.params)"
            style="margin-right: 6px"
            type="primary"
            >查询</el-button
          >
          <el-button @click="reset">重置</el-button>
        </div>
      </div>
    </div>
    <div class="vc-search-right"></div>
  </div>
</template>
<style lang="scss">
.self.vc-search {
  padding: 14px;
  padding-bottom: 0px;
}
.vc-search-left,
.vc-search-right {
  float: left;
  min-width: 0 !important;
}
.vc-search-left {
  width: 100%;
  @media screen and (max-width: 1530px) {
    .search-buton-box {
      float: right;
      .button-box {
        float: right;
      }
    }
  }
  @media screen and (min-width: 1530px) {
    .search-buton-box {
      float: right;
      width: 23% !important;
      .button-box {
        float: right;
      }
    }
  }
  .search-input-box {
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-bottom: 12px;
    float: left;
    .input-box {
      width: calc(100% - 128px) !important;
    }
    .vc-search-input {
      float: left;
      width: 250px;
      .el-input__wrapper {
        width: 250px;
      }
    }
    .search-title {
      float: left;
      font-size: 14px;
      font-family: SourceHanSansSC-Medium, SourceHanSansSC;
      font-weight: 500;
      color: #25292c;
    }
    .search-title,
    .el-input {
      display: inline-block;
      line-height: 30px;
      .el-input__inner {
        height: 30px !important;
        height: 30px !important;
      }
    }
    .search-title {
      margin-right: 10px;
      text-align: right;
    }
  }
}
.expand-box {
  display: inline-block;
}
.display {
  display: none !important;
}
.vc-search {
  overflow: hidden;
}
.search-buton-box {
  margin-bottom: 12px;
  float: right;
  .button-box {
    float: right;
    .el-button + .el-button {
      margin: 0px !important ;
    }
  }
}
</style>

<script>
export default {
  name: 'searchHeader',
  props: {
    searchConfig: {
      type: Object,
      default() {
        return {
          config: {
            rowCount: 2,
            col: '33%',
          },
          items: [
            {
              key: 'key',
              title: '标题',
              width: '250px',
              placeholder: '请输入',
            },
          ],
          reset: null,
          search: null,
          params: {},
        };
      },
    },
  },
  data() {
    return {
      box: {
        width: '34%',
      },
      insideConfig: {
        items: [],
      },
      rowCount: 3,
      isExpand: false, // 默认不展开
      screenWidth: '',
      screenHeight: '',
      spanValue: 2,
      styleObj: {
        width: 'calc(100% + 73px)',
        marginLeft: '-73px',
      },
    };
  },
  methods: {
    /** 第一个boxClass */
    isFirstBox(idx, item) {
      if (idx % (this.rowCount + 1) === 0) {
        this.spanValue = this.spanValue >= item.title.length ? this.spanValue : item.title.length;
        return true;
      }
      return false;
    },
    /**
     * 获取styleObj
     */
    getStyleObj() {
      const width = 73 - (this.spanValue - 2) * 15;
      const obj = {
        width: `calc(100% + ${width}px)`,
        marginLeft: `${-width}px`,
      };

      this.styleObj = obj;
    },
    /**  */
    init() {
      this.insideConfig = JSON.parse(JSON.stringify(this.searchConfig));

      this.getStyleObj();
    },
    /*
      内置清空搜索条件
    */
    reset() {
      // this.searchConfig.params = this.GLOBAL.object.clearValOfObj(this.searchConfig.params);
      this.searchConfig.reset();
    },
    /*
      判断display
    */
    display(idx, rowCount) {
      if (rowCount) {
        return idx >= rowCount && !this.isExpand;
      }
      return idx >= 2 && !this.isExpand;
    },
  },
  mounted() {
    window.onresize = () => (() => {
      this.screenWidth = document.body.clientWidth;
    })();
    if (document.body.clientWidth >= 1530) {
      this.box.width = '25%';
      this.rowCount = 3;
    } else {
      this.box.width = '33.3333%';
      this.rowCount = 2;
    }
    this.init();
  },
  watch: {
    screenWidth(value) {
      if (value >= 1530) {
        this.box.width = '25%';
        this.rowCount = 3;
      } else {
        this.box.width = '33.3333%';
        this.rowCount = 2;
      }
    },
  },
};
</script>
